<template>
	<RouterView />
	<div class="iconfont icon-gouxuanxuanzhong"></div>
</template>

<script setup>
import { onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { useMainStore } from '@/stores/useMain'
import { useTabsStore } from '@/stores/useTabs'

const router = useRouter()
const mainStore = useMainStore()
const tabsStore = useTabsStore()

// 全局路由守卫
router.beforeEach((to, from, next) => {
	// 如果是登录页面，清除标签页状态
	if (to.path === '/login') {
		tabsStore.clearTabs()
		next()
		return
	}
	
	// 检查是否已登录
	if (!mainStore.token || Object.keys(mainStore.userInfo).length === 0) {
		tabsStore.clearTabs()
		next('/login')
		return
	}
	
	next()
})

onMounted(() => {
	// 页面加载时也检查一次登录状态
	if (!mainStore.token || Object.keys(mainStore.userInfo).length === 0) {
		tabsStore.clearTabs()
		router.push('/login')
		return
	}

	// 如果有已保存的标签页和激活的标签页，跳转到对应路由
	if (tabsStore.tabs?.length > 0 && tabsStore.activeTabPath && tabsStore.activeTabPath !== '/') {
		router.push(tabsStore.activeTabPath)
	}
});
</script>

<style>

.Button{
	height: 40px !important;
}

#app {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.main-container {
  flex: 1;
  height: 100%;
  overflow: hidden;
}
.text-center{
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
}
</style>
